import react from 'react';
import './nav.css';

import {Link} from 'react-router-dom';
export default class Nav extends react.Component{

    constructor(){
        super()
        this.state={
            headeList:[],
            tabIndex:-1
        }
    }
    mouseoverHandler(index){
        this.setState({
            tabIndex:index
        })
    }
    mouseoutHandler(){
        this.setState({
            tabIndex:-1
        })
    }
    // fetch  axios
    componentDidMount(){
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res=>{
           if(res.data.msg=='操作成功'){
                this.setState({
                    headeList:res.data.result
                })
           }
        })
    }
    render(){
        return <div className="re">
               
                    <ul className="app-header-nav"> 
                    {this.state.headeList.length>0&&
                        <li className="home">首页</li> }
                        {this.state.headeList.map( (i,index)=>{
                            return  <li key={index} 
                            onMouseOut = {this.mouseoutHandler.bind(this)}
                            onMouseOver={this.mouseoverHandler.bind(this,index)}>
                                        <Link to={'/category/'+i.id}>{i.name}</Link>
                                        <div  className={`layer ${index===this.state.tabIndex&&'open'}` }>
                                            <ul>
                                                {i.children.map( (item,index)=>{
                                                    return <li key={index}>
                                                                <img src={item.picture} alt="" />
                                                                <p>{item.name}</p>
                                                            </li>
                                                })}
                                            </ul>
                                        </div>
                                </li> 
                             
                        })}
                    </ul>
                  
               </div>
    }
}